

<script lang="ts">
export default {
  name: 'Pagination',
}
</script>

<script lang="ts" setup>
const prop = defineProps(['page'])
const emit = defineEmits(['change', 'update:page'])

function handleSizeChange(e: number) {
  prop.page.size = e
  emit("update:page", prop.page);
  emit("change", prop.page);
}

function handleCurrentChange(e: number) {
  prop.page.page = e
  emit("update:page", prop.page);
  emit("change", prop.page);
}

</script>

<template>
  <el-pagination background layout="prev, pager, next, jumper,sizes,total"
                 :total="page.total"
                 :pager-count="5"
                 v-model:page-size="page.size"
                 v-model:current-page="page.page"
                 :default-page-size="page.size"
                 :hide-on-single-page="true"
                 :page-sizes="[15,30,50,100,200]"
                 @size-change="handleSizeChange"
                 @current-change="handleCurrentChange"/>
</template>

<style scoped>

</style>